import Vue from "vue";
import Vuex from "vuex";
import { fetchProduct } from "../api/index";
import user from "../store/user/user.js"
import createPersistedState from "vuex-persistedstate";

//购物车模块引入
import  cart from "../store/cart/cart"
import  product from "../store/product/product"
//将vuex注入到所有的子组件中
Vue.use(Vuex);
/**
 * @vuex说明
 * @ npm i vuex@3
 * @一个状态管理工具用于解决组件之间繁琐的传参流程
 * @引入vue和vuex
 * @导出new Vuex.Store
 * @main.js中引入
 * @挂载到vue实例
 * @就是个状态管理器
 * @取state [this.$store.state]
 * @组件中的状态需要给多个组件共享的时候可以放到vuex中进行集中管理
 * @-------登入时拿vuex的数据丢失的问题？？
 * @vuex是基于内存进行存储的
 */
//dispatch
//实例化vuex
export default new Vuex.Store({
  //开启严格模式
  //strict: process.env.NODE_ENV !== 'production'
  /* vuex数据持久化配置 */
  state: {
    //被其他组件共享的数据
    //视图发生变化我们vuex的状态也会发生变化
    //模板字符串中$store.state.api
    //js中需要加上this$store.state.api
    api: "http://www.baidu.com",
    name: "z神",
    age: 30,
    count: 1,
    msg: "如果你想改变就是现在,而不是等明天",
    rName: "神码是不我",
    list: [],
    jssay:"你为你得到的是谁的爱,是一个鸡神的爱",
    //购物车开始
  },
  getters: {
    /*
     有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：getter相当于vuex中的计算属性
    */
    reverseName(state) {
      //state作为参数
      //这里也能改
      state.rName = "狗才倒着读";
      return state.rName.split("").reverse().join("");
    },
  },
  /*更改vuex中状态的唯一方式就是提交mutation`。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 **事件类型 (type)** 和 一个 **回调函数 (handler)**。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 **state** 作为第一个参数：*/
  mutations: {
    //触发这个方式需要用 this.$store.commit("方法名字",payload)
    //更该state的唯一方式
    //定义增加
    //异步最好别写在这里
    increment(state, payload) {
      state.count++;
      console.log(payload + ":" + state.count);
    },
    //定义减少
    decrease(state, payload) {
      state.count--;
      console.log(payload + ":" + state.count);
      if (state.count <= 0) state.count = 0;
    },
    async getProduct(state, paylaod) {
      // let res = await fetchProduct();
      // console.log(res.data)
      // state.list = res.data;
    },
    setList(state,payload){
           state.list = payload
    } 
  },
  actions: {
    //action提交的是mutaion而不是直接变更状态
    //正确异步
    //action 接受context对象作为第一个参数
    async getData(context) {
      let res = await fetchProduct();
      // console.log(res.data)
      // state.list = res.data;
      // console.log(context.rootState.list)
      //提交mutations来更改状态
       context.commit("setList",res.data)
    },
    
  },
  modules: {
    //模块化store
    //单例对象
    //为了解决项目庞大  会造成代码臃肿的问题
    //怎么访问模块的数据呢？
    //命名空间
    //
    user,
    cart,
    product
  },
  //插件
  plugins:[createPersistedState({
     //存储的类型 localStorage  sessionStorage
     storage:window.sessionStorage,
     //存储的key
     key:"userInfo",
     //储存的state
     //怎么存储user里面的模块？
     //user.userInfo
     paths:["user.userInfo"],
  })]
});


/**
 * @vue插件说明
 * @store接受plugins选项
 * @这个选项暴露每次mutation的钩子
 * @就是一个函数
 * @接受store作为唯一参数
 * @持久化存储(企业级解决方案)
 * 安装
 * npm install --save vuex-persistedstate
 * 使用
 * 引入插件
 * import createPersistedState from "vuex-persistedstate";
 */
